<template>
  <el-card>
    <el-form label-width="120px" :model="cateInfo" :rules="rules" ref="addForm">
      <el-form-item label="上级" prop="pid">
        <el-select v-model="cateInfo.pid">
          <el-option value label="请选择"></el-option>
          <el-option :value="0" label="顶级分类"></el-option>
          <el-option
            v-for="item in topCateList"
            :key="item.id"
            :value="item.id"
            :label="item.catename"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="分类名称" prop="catename">
        <el-input v-model="cateInfo.catename" placeholder="请输入分类名称"></el-input>
      </el-form-item>
      <el-form-item label="分类图片">
        <!-- 
          action: 指定上传图片的接口地址
          list-type: 指定展示样式
          on-preview: 预览的事件监听函数
          on-remove: 删除的事件监听函数
          on-change: 监听文件的改变
          limit:限制上传图片的数量
        -->
        <el-upload
          action="#"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
          :auto-upload="false"
          :on-change="fileChange"
          :limit="1"
          :on-exceed="limitTips"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
        <!-- 图片预览组件 -->
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-radio-group v-model="cateInfo.status">
          <el-radio :label="1">正常</el-radio>
          <el-radio :label="2">禁用</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-button @click="submitForm" type="primary">立即添加</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
import { getCateList } from "../../request/category";
export default {
  data() {
    return {
      // 一级分类
      topCateList: [],
      // 和表单元素进行双向数据绑定
      cateInfo: {
        // 上级分类
        pid: "",
        // 分类名称
        catename: "",
        // 分类图片
        img: "",
        // 状态
        status: 1
      },
      // 定义表单校验规则
      rules: {
        pid: { required: true, message: "请选择", trigger: "blur" },
        catename: { required: true, message: "请输入", trigger: "blur" },
        status: { required: true, message: "请选择", trigger: "blur" }
      },
      // 图片上传组件需要的
      dialogImageUrl: "",
      dialogVisible: false
    };
  },
  methods: {
    submitForm() {
      this.$refs.addForm.validate(async valid => {
        if (valid) {
          // 创建FormData实例对象
          const fd = new FormData();
          for (let key in this.cateInfo) {
            fd.append(key, this.cateInfo[key]);
          }
          const res = await this.$http.post("/api/cateadd", fd);
          if (res.code == 200) {
            this.$success("添加成功");
            this.$router.push("/category");
          } else {
            this.$error("添加失败");
          }
        } else {
          console.log("表单校验不通过");
        }
      });
    },
    // 图片上传相关
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    // 获取被选择文件的信息
    fileChange(file) {
      //  将图片的原始信息保存到this.cateInfo.img属性之中
      this.cateInfo.img = file.raw;
    },
    // 获取上级分类
    async getTopCates() {
      const list = await getCateList();
      if (list) {
        // 更新数据
        this.topCateList = list;
      }
    },
    // 图片数量超出限制之后的回调
    limitTips() {
      this.$error("此处只能上传一张图片");
    }
  },
  created() {
    this.getTopCates();
  }
};
</script>

<style scoped>
.el-form {
  width: 600px;
  margin: auto;
}
</style>